<template>
  <div>
    <el-dropdown
      trigger="click"
      teleported
      class="search-drown-down"
      popper-class="search-drown-down-content"
    >
      <div class="input-search">
        <el-input
          v-model="searchValue"
          class="input-search-content"
          :placeholder="$t('search.search_tip')"
          @focus="dropdownVisible = true"
        >
          <template #prepend>
            <el-select
              v-model="searchType"
              :placeholder="$t(searchTypePlaceHolder)"
              class="input-search-type"
              @change="searchTypeChange"
            >
              <el-option
                v-for="typeItem in searchTypes"
                :key="typeItem.key"
                :label="$t(typeItem.label)"
                :value="typeItem.value"
              />
            </el-select>
          </template>
          <template #append>
            <div
              class="input-search-btn"
              @click.stop="handleSearch"
            >
              <img
                :src="searchIcon"
                style="margin-left: 5px;"
              >
              <div style="margin-left: 10px;">
                {{ $t('search.search_text') }}
              </div>
            </div>
          </template>
        </el-input>
      </div>
      <template #dropdown>
        <div class="drop-item-search">
          <div class="drop-item-search-inner">
            <div class="drop-item-search-inner--title">
              <span>{{ $t('search.dropdown.recent_search') }}</span>
              <el-icon
                class="drop-item-search-inner--icon"
                :size="24"
                color="#797979"
                @click="clearSearchHistory"
              >
                <Delete />
              </el-icon>
            </div>
            <div class="drop-item-search-inner--content">
              <div
                v-for="item in recentSearchItems"
                :key="item"
                class="drop-item-search-inner--item"
                @click="handleClickItem(item)"
              >
                {{ item }}
              </div>
            </div>
          </div>
          <div class="drop-item-search-inner">
            <div class="drop-item-search-inner--title">
              {{ $t('search.dropdown.popular_search') }}
            </div>
            <div class="drop-item-search-inner--content">
              <div
                v-for="item in popularSearchItems"
                :key="item"
                class="drop-item-search-inner--item"
                @click="handleClickItem(item)"
              >
                {{ item }}
              </div>
            </div>
          </div>
        </div>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import {defineComponent,ref,computed} from "vue";
import searchIcon from '@/assets/images/ui/search/search.svg';

defineComponent({
  name: 'SearchInput'
})

const props = defineProps({
  searchTypes: {
    type: Array,
    default: ()=>[],
  },
  recentSearchItems: {
    type: Array,
    default: ()=>[],
  },
  popularSearchItems: {
    type: Array,
    default: ()=>[],
  },
});
const emits = defineEmits(['searchClick','removeRecentSearchItems','handleSearchTypeChange'])

const searchTypePlaceHolder = computed(()=>{
  if(props.searchTypes.length>0){
    let tmp = props.searchTypes[0];
    return tmp.label;
  }else{
    return '';
  }
});
const searchType = ref('');
const dropdownVisible = ref(true);
const searchValue = ref('');

const handleSearch = ()=>{
  emits('searchClick',searchValue.value);
}

const handleClickItem = (item)=>{
  searchValue.value = item;
}

const clearSearchHistory = ()=>{
  emits('removeRecentSearchItems',{})
}

const searchTypeChange = (value) => {
  emits('handleSearchTypeChange',value)
}
</script>

<style scoped lang="scss">
.input-search {
  width: 700px;
  height: 40px;
  :deep(.el-input) {
    height: 40px;
  }
  :deep(.el-input-group__append){
    padding: 0px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
  }
  :deep(.el-input-group__prepend){
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
  }

}
.input-search-btn {
  display: flex;
  align-items: center;
  background-color: #f67938;
  color: #fff;
  width: 100px;
  height: 100%;
  font-size: 14px;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  cursor: pointer;
}
.input-search-type {
  width: 100px;
  :deep(.el-input__wrapper){
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
  }
  :deep(.el-input__inner){
    text-align: center;
  }
}
:focus-visible {
  outline: none !important;
}
.search-drown-down-content{
  .drop-item-search{
    margin-bottom: 30px;
    width: 500px;
    font-size: 14px;
    color: #333333;
    .drop-item-search-inner {
      .drop-item-search-inner--title {
        margin-top: 15px;
        font-weight: 700;
        margin-left: 7px;
      }
      .drop-item-search-inner--icon {
        float: right;
        cursor: pointer;
        margin-right: 7px;
      };
      .drop-item-search-inner--content {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        .drop-item-search-inner--item {
          margin-left: 25px;
          margin-top: 15px;
          cursor: pointer;
          font-weight: 400;
          line-height: 30px;
          &:hover {
            background-color: #dcffff;
          }
        }
      }
    }
  }
}
</style>